<template>
    <div>
        <el-button type="primary"  @click="addauthorization('')" >新增一级目录</el-button>
        <el-tree  :data="data" :props="defaultProps" @node-click="handleNodeClick" :default-expand-all="expandall">
            <div class="custom-tree-node" slot-scope="{ node,data }">
                <span>{{ node.label }}</span>
                 <label>
                    <span  @click="deleteauthorization(data)">删除</span>
                </label>
                 <label>
                    <span  @click="updateauthorization(data)">修改</span>
                </label>
                <label>
                    <span  v-show="data.type!=2" @click="addauthorization(data)">新增子目录</span>
                </label>
            </div>
        </el-tree>
        <el-dialog :title="title" :visible.sync="editVisible" width="85%">
            <el-form ref="form" :model="menu" label-width="100px">
                <el-form-item label="菜单名称">
                    <el-input v-model="menu.name" placeholder="请输入权限菜单名称"></el-input>
                </el-form-item>
                <el-form-item label="说明">
                    <el-input type="textarea" v-model="menu.description" placeholder="请填写说明"></el-input>
                </el-form-item>
                <el-form-item label="访问地址">
                    <el-input v-model="menu.url" placeholder="请输入访问地址"></el-input>
                </el-form-item>
                <el-form-item label="web跳转地址">
                    <el-input v-model="menu.jumpUrl" placeholder="请输入web跳转地址"></el-input>
                </el-form-item>
                <el-form-item label="权限code" >
                    <el-input v-model="menu.permsCode" placeholder="请输入权限code"></el-input>
                </el-form-item>
                 <!-- <el-form-item label="父级id" >
                    <el-input v-model="menu.parentId" placeholder="请输入父级id"></el-input>
                </el-form-item> -->
                <!-- <el-form-item label="类型">
                    <el-select v-model="menu.type" placeholder="类型" class="handle-select mr10">
                        <el-option  label="目录" value="0"></el-option>
                        <el-option  label="菜单" value="1"></el-option>
                        <el-option  label="按钮" value="2"></el-option>
                    </el-select>
                </el-form-item> -->
                <el-form-item label="排序" >
                    <el-input v-model="menu.sort" placeholder="请输入排序"></el-input>
                </el-form-item>
                 <el-form-item label="图标" >
                    <el-input v-model="menu.iconUrl" placeholder="请输入图标"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editVisible = false">取 消</el-button>
                <!-- @click="saveEdit"-->
                <el-button type="primary" @click="updateClick(menu)">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<!-- 功能实现 -->
<script>
import { menuadd } from '@/api/api.js';
import { permissionlist } from '@/api/api.js';
import { menuupdate } from '@/api/api.js';

export default {
    data() {
        return{
            menu:{   
                name:"",
                description: "",
                url: "",
                jumpUrl: "",
                permsCode: "",
                parentId: "",
                type: "",
                sort: "",
                iconUrl: ""
            },
            title:"新增权限",
            editVisible:false,
            defaultProps:{
                children: 'childList',
                label: 'name'
            },
            data:[],
            expandall:true
        }
    },
    created() {
        this.permissionlist();
    },
    methods: {
        permissionlist:function(){
            permissionlist({
                type:null,
                parentId:0
            }).then(res => {
                    if(res.returnCode == 200){
                        this.data=res.data;
                    }
            })
        },
        addauthorization:function(data){
            this.menu={   
                name:"",
                description: "",
                url: "",
                jumpUrl: "",
                permsCode: "",
                parentId: "",
                type: '',
                sort: "",
                iconUrl: ""
            }
            if(data){
                this.menu.parentId=data.id;
                this.menu.type=data.type+1;
            }else{
                 this.menu.parentId=0;
                 this.menu.type=0;
            }
           this.editVisible=true;
        },
        updateauthorization:function(data){
            this.menu=data;
            this.editVisible=true
        },
        updateClick:function(menu){
            if(!menu.name){
                this.$message.success(`请填写菜单名称`);
                return false;
            }
            if(!menu.jumpUrl&&!menu.url&&menu.type==1){
                this.$message.success(`请选择填写web跳转地址或者接口访问地址`);
                return false;
            }
            if(!menu.url&&menu.type==2){
                this.$message.success(`请选择填写接口访问地址`);
                return false;
            }
            // if(!menu.parentId){
            //     this.$message.success(`请填写父级id`);
            //     return false;
            // }
            // if(menu.type==""){
            //     this.$message.success(`请选择类型`);
            //     return false;
            // }
            if(menu.id){
                this.menuupdate()
            }else{
                this.menuadd()
            }
          
        },
        menuupdate:function(){
            menuupdate(this.menu).then(res => {
                if(res.returnCode == 200){                   
                    this.permissionlist();
                    this.editVisible=false;
                }
			})
        },
        menuadd:function(){
            menuadd(this.menu).then(res => {
                if(res.returnCode == 200){                   
                    this.permissionlist();
                    this.editVisible=false;
                }
			})
        },
        handleNodeClick:function(){
       
        },
        deleteauthorization:function(data){
            this.$confirm('确定要删除吗', '删除权限', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                callback: action => {
                    if (action === 'confirm') {
                        menudelete(data.id).then(res => {
                            if(res.returnCode == 200){                   
                                this.permissionlist();
                            }
                        })
                    }else {
                        
                    }
                }
            })
         
        }
    }
};
</script>

<!-- css样式实现 -->
<style scoped>
.custom-tree-node{
    width: 90%;
}
.custom-tree-node label{
    float: right;
    margin-left: 10px;
}
.custom-tree-node label span{
    color:#409EFF;
}
.el-button--small, .el-button--small.is-round {
    padding: 9px 15px;
    margin: 5px 0px 15px;
}
.el-tree{
    padding: 15px;
}
.custom-tree-node[data-v-dff4cf1a]{
    font-size: 14px;
}
</style>
